<template>
  <div class="container" :style="containerStyle">
    <list class="item-list-container">
      <page-refresh v-on:refresh="onXRefresh" v-on:pullingDown="onPullingDown" :refreshing="refreshing"
                    :indicatorScale="indicatorScale"></page-refresh>
      <cell v-if="remainSeconds > 0">
        <div class="countdown-container">
          <time-countdown :seconds.sync="remainSeconds"  style="margin-top: 10;"></time-countdown>
        </div>
      </cell>
      <cell v-for="(fsi, idx) in flashSaleItemList" v-bind:key="idx">
        <div class="fsi-info">
          <image :src="fsi.item.picUrl" class="fsi-pic" resize="contain"></image>
          <div class="fsi-details">
            <div class="fsi-title">
              <image :src="platformIcon(fsi.item.ecomPlat)" class="fsi-title-icon"></image>
              <text class="fsi-title-text">     {{fsi.item.title}}</text>
            </div>
            <text class="fsi-slogan" v-if="fsi.slogan && remainSeconds > 0">{{fsi.slogan}}</text>
            <progress-bar v-if="remainSeconds <= 0" :width="300" :text="'已抢' + fsi.drawnNum"
                          :value="(fsi.drawnNum) / fsi.totalNum"></progress-bar>
            <div class="fsi-row">
              <div class="fsi-price-wrapper">
                <text class="fsi-price">¥ {{fsi.item.originPrice}}</text>
              </div>
            </div>
          </div>
          <div class="fsi-draw">
            <template v-if="remainSeconds > 0">
              <text class="fsi-draw-text">未开始</text>
              <text class="fsi-draw-btn fsi-draw-btn-notice fsi-draw-btn-noticed" v-if="fsi.userRemind" @click="exitRemind(idx)">已提醒</text>
              <text class="fsi-draw-btn fsi-draw-btn-notice " v-else @click="joinRemind(idx)">提醒我</text>
            </template>
            <template v-else>
              <text class="fsi-draw-btn" @click="draw(idx)" v-if="!fsi.drawn">立即抢</text>
              <text class="fsi-draw-btn fsi-draw-btn-drawn" @click="draw(idx)"  v-else>已抢单</text>
            </template>
          </div>
          <text class="fsi-user-level" v-if="fsi.userLevel">{{fsi.userLevelTitle}}专享</text>
        </div>
      </cell>
      <cell>
        <page-notice msg="抱歉，什么都木有找到～" :icon="sorryIcon" v-if="!flashSaleItemList.length && !hasNext"></page-notice>
      </cell>
      <page-loading-more v-on:loadingMore="onLoadingMore" :loadingMore="loadingMore"
                         :shown="hasNext"></page-loading-more>
    </list>
    <page-scrolltop :shown="pageScrollTopShown" @click="gotoTop"></page-scrolltop>
    <wxc-loading :show="loadingShow"></wxc-loading>
    <flash-sale-item-draw ref="flashSaleItemDraw"></flash-sale-item-draw>
  </div>
</template>
<style lang="scss">
  @import "../sass/var";
  @import "../sass/mixin";
  @import "../sass/buttons";
  @import "../sass/icon";

  .container {
    background-color: $body-bg;
    transition: transform .3s linear;
  }
  .item-list-container {
    /*background-color: #FFFFFF;*/
    /*padding: 20;*/
  }

  .countdown-container {
    padding: 10px;
  }

  .fsi {
    &-info {
      flex-direction: row;
      background-color: #ffffff;
      align-items: stretch;
      margin: 10px;
      padding: 10px;
      border-radius: 6px;
      margin-bottom: 0;
      height: 230px;
      position: relative;
    }
    &-user-level {
      font-size: 24px;
      position: absolute;
      bottom: 10px;
      right: 10px;
      color: $color-warning;
    }
    &-draw {
      display: flex;
      justify-content: center;
      align-items: center;
      &-text {
        font-size: 24px;
        color: $color-warning;
        margin-bottom: 10px;
      }
      &-btn {
        &:active {
          opacity: .5;
        }
        opacity: 1;
        height: 40px;
        line-height: 40px;
        border-radius: 40px;
        padding: 0 20px;
        font-size: 24px;
        background-color: $brand-primary;
        color: #fff;
        &-notice {
          background-color: $brand-warning;
        }
        &-noticed {
          background-color: #fff;
          color: $color-warning;
          @include border(1px, solid, #ddd)
        }
        &-drawn {
          background-color: #fff;
          color: $color-success;
          @include border(1px, solid, #ddd)
        }
      }
    }
    &-title {
      position: relative;
      &-text {
        font-size: 28px;
        color: $color;
        line-height: 32px;
        lines: 3;
        text-overflow: ellipsis;
      }

      &-icon {
        width: 32px;
        height: 32px;
        position: absolute;
        top: 0;
        left: 0;
      }
      margin-bottom: 20px;
    }
    &-slogan {
      font-size: 32px;
      color: $color-warning;
      margin-bottom: 20px;
    }
    &-pic {
      width: 200px;
      height: 200px;
    }
    &-details {
      margin-left: 20px;
      flex: 1;
      justify-content: space-between;
    }
    &-commission {
      color: $color-primary;
      font-size: 26px;
      margin-bottom: 20px;
    }
    &-row {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }
    &-price {
      font-size: 40px;
      color: $color-primary;
      &-origin {
        color: $color-muted;
        font-size: 26px;
      }
      &-wrapper {
        flex-direction: row;
        align-items: center;
      }
    }
  }

</style>
<script>
import {WxcLoading} from 'weex-ui'
let api = require('../include/api')
let navigator = require('../include/xnavigator')
let urlPath = require('../include/url-path')
let Deferred = require('Deferred')
let dom = weex.requireModule('dom')
let modal = weex.requireModule('modal')
module.exports = {
  mixins: [
    require('../mixin/page-refresh'),
    require('../mixin/page-scrolltop'),
    require('../mixin/page-loading-more')
  ],
  components: {
    'page-notice': require('../components/page-notice.vue'),
    'navbar': require('../components/navbar.vue'),
    coupon: require('./coupon.vue'),
    'progress-bar': require('../components/progressbar.vue'),
    'time-countdown': require('../components/time-countdown.vue'),
    WxcLoading,
    FlashSaleItemDraw: require('../components/flash-sale-item-draw.vue')
  },
  props: {
    height: {default: 0},
    date: {default: ''},
    season: {default: ''},
    active: {default: false}
  },
  data () {
    return {
      flashSaleItemList: [],
      refreshing: false,
      refreshIndicatorScale: 0.2,
      sorryIcon: 'images/aiya.png',
      loadingShow: false,
      hasNext: false,
      containerStyle: {},
      searchParam: {},
      remainSeconds: 0,
      iosShow: false
    }
  },
  created () {
    if (this.height) {
      this.containerStyle.height = this.height
    }
    this.containerStyle.width = 750
    this.searchParam.date = this.date
    this.searchParam.season = this.season
    if (this.active) {
      this.search()
    }
    this.$watch('active', (newVal) => {
      newVal && this.search()
    })
  },
  methods: {
    loadData () {

    },
    exitRemind (idx) {
      const fsi = this.flashSaleItemList[idx]
      api.flashSaleRemind.exit({
        flashSaleItemId: fsi.id
      }).done(rs => {
        if (rs.success) {
          fsi.userRemind = false
          this.$set(this.flashSaleItemList, idx, fsi)
        }
      })
    },
    draw (idx) {
      const fsi = this.flashSaleItemList[idx]
      this.$refs.flashSaleItemDraw.show(fsi.id, (data) => {
        fsi.drawn = data
        this.$set(this.flashSaleItemList, idx, fsi)
      })
    },
    joinRemind (idx) {
      const fsi = this.flashSaleItemList[idx]
      api.flashSaleRemind.join({
        flashSaleItemId: fsi.id
      }).done(rs => {
        if (rs.success) {
          fsi.userRemind = true
          this.$set(this.flashSaleItemList, idx, fsi)
        }
      })
    },
    resetSearchParam () {
      this.searchParam.page = 1
      this.hasNext = false
    },
    search (append) {
      return api.flashSaleItem.search(this.searchParam).done(rs => {
        let data = rs.data
        let paging = data.flashSaleItemPaging
        this.remainSeconds = data.remainSeconds
        if (append) {
          this.flashSaleItemList = this.flashSaleItemList.concat(paging.results)
        } else {
          this.flashSaleItemList = paging.results
        }
        this.hasNext = paging.hasNext
      })
    },
    onXRefresh (event) {
      this.resetSearchParam()
      this.onRefresh(event, Deferred.when(this.search()))
    },
    platformIcon (ecomPlat) {
      return urlPath.assets('images/icon/platform/' + ecomPlat + '.png')
    },
    onLoadingMore (event) {
      this.loadingMore = true
      this.searchParam.page = this.searchParam.page + 1
      this.search(true).done(() => {
        this.loadingMore = false
      })
    },
    gotoTop () {
      dom.scrollToElement(this.$refs.top)
    },
    onPageScroll (event) {
      this.onPageScrollForScrollTop(event)
    },
    itemClick (fsi) {
      navigator.push('commission-item.js?id=' + fsi.item.id + '&flashSaleRemainSeconds=' + this.remainSeconds)
    }
  }
}
</script>
